Step 2 of 3: Adding Content to the Panel

In the previous step you created a new WPF or Silverlight project and added a C1HyperPanel panel to the application. In this step you'll continue by adding controls to the panel.

Complete the following steps:

In XAML view, place the cursor just between the <c1:C1HyperPanel> and </c1:C1HyperPanel> tags; now when you add items they will be added inside the panel.
Navigate to the Toolbox and double-click the ContentControl icon to add the control to C1HyperPanel. That's all you have to do to add an item to a C1HyperPanel panel – you can items as you would normally to other panels include the Grid and Canvas.

Note: You can also simply add the XAML markup in the next step.

Switch to XAML view and update the ContentControl's markup so that it appears similar to the following:

XAML	Copy Code
<ContentControl Content="h" ContentTemplate="{StaticResource letterTemplate}"/>

Enter the following XAML under the ContentControl's markup and within the C1HyperPanel to add additional controls to the panel:

XAML	Copy Code
<ContentControl Content="e" ContentTemplate="{StaticResource letterTemplate}"/> <ContentControl Content="l" ContentTemplate="{StaticResource letterTemplate}"/> <ContentControl Content="l" ContentTemplate="{StaticResource letterTemplate}"/> <ContentControl Content="o" ContentTemplate="{StaticResource letterTemplate}"/> <ContentControl Content=" " ContentTemplate="{StaticResource letterTemplate}"/> <ContentControl Content="w" ContentTemplate="{StaticResource letterTemplate}"/> <ContentControl Content="o" ContentTemplate="{StaticResource letterTemplate}"/> <ContentControl Content="r" ContentTemplate="{StaticResource letterTemplate}"/> <ContentControl Content="l" ContentTemplate="{StaticResource letterTemplate}"/> <ContentControl Content="d" ContentTemplate="{StaticResource letterTemplate}"/> <ContentControl Content="!" ContentTemplate="{StaticResource letterTemplate}"/>

XAML

Copy Code

<ContentControl Content="e" ContentTemplate="{StaticResource letterTemplate}"/>
<ContentControl Content="l" ContentTemplate="{StaticResource letterTemplate}"/>
<ContentControl Content="l" ContentTemplate="{StaticResource letterTemplate}"/>
<ContentControl Content="o" ContentTemplate="{StaticResource letterTemplate}"/>
<ContentControl Content=" " ContentTemplate="{StaticResource letterTemplate}"/>
<ContentControl Content="w" ContentTemplate="{StaticResource letterTemplate}"/>
<ContentControl Content="o" ContentTemplate="{StaticResource letterTemplate}"/>
<ContentControl Content="r" ContentTemplate="{StaticResource letterTemplate}"/>
<ContentControl Content="l" ContentTemplate="{StaticResource letterTemplate}"/>
<ContentControl Content="d" ContentTemplate="{StaticResource letterTemplate}"/>
<ContentControl Content="!" ContentTemplate="{StaticResource letterTemplate}"/>

From the Debug menu, select Start Debugging to view how your application will appear at run time. It will appear similar to the following:

HyperPanel

You've successfully created a WPF or Silverlight application and added C1HyperPanel and controls to the application. In the next step you'll customize C1HyperPanel.